<template>
  <div class="pages" v-cloak>
    <div class="pageLevel split-config" v-if='!sub'>
      <!--   操作框     -->
      <div class="tableSearch">
        <el-form label-width="135px" class="demo-ruleForm">
          <el-form-item label="服务商类型：">
            <el-select v-model="searchData.serviceProviderTypeNumber" placeholder="服务商类型" style='width:200px' size='small'
                       @change='selectChange'>
              <el-option label='全部' value=''></el-option>
              <el-option v-for='item in serviceProviderType' :label="item.serviceProviderTypeName" :value="item.serviceProviderTypeNumber" :key='item.serviceProviderTypeNumber'></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务商等级：">
            <el-select v-model="searchData.serviceProviderGradeNumber" placeholder="服务商等级" style='width:200px' size='small'>
              <el-option label='全部' value=''></el-option>
              <el-option v-for='item in serviceProviderGrade' :label="item.serviceProviderGradeName" :value="item.serviceProviderGradeNumber" :key='item.serviceProviderGradeNumber'></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" label-width="15px">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="getTableData ('1')">查询</el-button>
            <el-button type="primary" icon="el-icon-plus" size='mini' @click="routerPush('new')" key='add' v-if='setRole("新建")'>新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table ref="multipleTable" :data="tableData" stripe style="width: 100%">
          <el-table-column type="index" label="序号" width="80" align='center'></el-table-column>
          <el-table-column prop="serviceProviderTypeName" align="center" label="服务商类型"></el-table-column>
          <el-table-column prop="serviceProviderGradeName" align="center" label="服务商等级"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="routerPush('see',scope.row.id)">查看</el-button>
              <el-button size="small" type="text" @click="routerPush('edit',scope.row.id)" v-if='setRole("修改")'>修改</el-button>
              <el-button type="text" size='small' @click="tipsDele(scope.row.id)" v-if='setRole("删除")'>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pageblock">
        <el-pagination @current-change="handleCurrentChange" :current-page="searchData.pageNum"   layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>
    <template v-else>
      <router-view></router-view>
    </template>
  </div>
</template>

<script>
  import util from '@/util'
  import { mapState } from "vuex";
  import {
    findServiceProviderTypeList,
    findServiceProviderGradeByTypeList,
    addOrUpdateBenefitConfig,
    findBenefitConfigDetailsInfo,
    deleteBenefitConfig,
    findBenefitConfigList
  } from '@/api'
    export default {
      name: "split-configurationMg",
      data() {
        return {
          serviceProviderType: [], //服务商类型列表
          serviceProviderGrade: [], //服务商等级列表
          searchData: {  //模糊查询
            serviceProviderTypeNumber: '',
            serviceProviderGradeNumber: '',
            pageNum: 1,
            pageSize: 10
          },
          tableData: [],
          total: 0
        }
      },
      computed: mapState([
        "merchantId",
        "sub",
        'power',
        "isReLoadData"]),
      watch: {
        sub: {
          handler: function(val, oldVal){
            if (oldVal != null && val == false) {
              this.getTableData ('1')
            }
          },
          deep: true
        }
      },
      mounted() {
        this.getTableData ('1')
        this.getServiceTypeList()
      },
      methods: {
        setRole (key) {
          return util.selectTitle(this.power, key)
        },
        //服务商类型
        getServiceTypeList () {
          findServiceProviderTypeList().then(res =>{
            if(res.code == 200) {
              this.serviceProviderType = res.data.list
            }
          })
        },
        //服务商类型选择
        selectChange (val) {
          if(val!=''){
          this.getServiceGradeList(val)
          }else{
            this.serviceProviderGrade=[]
          }
          this.searchData.serviceProviderGradeNumber=''
        },
        //服务商等级
        getServiceGradeList (num) {
          let data = {
            serviceProviderTypeNumber: num
          }
          findServiceProviderGradeByTypeList(data).then(res =>{
            if (res.code == 200) {
              this.serviceProviderGrade = res.data.list
            }
          })
        },
        handleCurrentChange(val) {
          this.getTableData(val);
        },
        getTableData (pageNum) {
          let data = JSON.parse(JSON.stringify(this.searchData))
          data.pageNum = pageNum
          data.shopId = this.merchantId
          findBenefitConfigList(data).then(res =>{
            if (res.code == 200) {
              this.tableData = res.data.list
              this.total = res.data.pageTotal
            }
          })
        },
        routerPush(handle, targetId = '') {
          util.routerTo('/operate-management/serviceProvider-management/splitConfig-list/splitConfig-details',{
            handle: handle,
            targetId: targetId,
          })
        },
        deleTable(id) {
         let data = {
           benefitConfigId: id
         }
          deleteBenefitConfig(data).then(res =>{
            if(res.code == 200) {
              this.tips('删除成功', 'success')
              this.getTableData ('1')
            } else {
              this.tips(res.msg, 'error')
            }
          })
        },
        tipsInfo(txt) {
          this.$alert(txt, '提示', {
            confirmButtonText: '确定',
            showClose: false,
            callback: action => {
              //关闭后执行的操作
            }
          });
        },
        tipsDele(id) {
          this.$confirm('确定是否删除', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            showClose: false
          }).then(() => {
            //确定执行的操作
            this.deleTable(id);
          }).catch(() => {
            //取消执行的操作
          });
        },
        tips(tip,type) {
          this.$message({
            message: tip,
            type: type
          });
        },
      }
    }
</script>

<style lang='less' scoped>
  .pages{
    position: absolute;
    top: 70px;
    left: 11px;
    right: 11px;
    bottom: 10px;
    // overflow: auto;
  }
</style>
